function WsjAudio(ele) {
    const audioHTML = ele.innerHTML;
    ele.classList.add('wsj-audio-player');
    ele.innerHTML = renderDOM() + audioHTML;

    var isTouch = "ontouchstart" in window;
    var eStart = isTouch ? "touchstart" : "mousedown";
    var eMove = isTouch ? "touchmove" : "mousemove";
    var eEnd = isTouch ? "touchend" : "mouseup";
    var eCancel = isTouch ? "touchcancel" : "mouseup";
    var that = this
    that.eleAudio = ele.querySelector('audio')
    that.elePlayIcon = ele.querySelector('svg')
    that.eleBaoGuo = ele.querySelector('.baoguo')
    that.eleRangePointer = ele.querySelector('.range-pointer')
    ele.querySelector('.pass-time').innerHTML = secondsToTime(0)
    ele.querySelector('.sum-time').innerHTML = secondsToTime(0)
    that.offsetX = offsetXY(that.eleBaoGuo).left//这个要放在renderDOM后计算,因为要把pass-time的宽度计算进去
    console.log('======that.offsetX', that.offsetX);
    that.startX = 0//实际进度条长度
    that.sumX = 0//移动后的长度
    that.alreadyMove = false//判断用户对进度条是点击还是拖动

    that.showPlayIcon = function (bool) {
        if (bool) {
            ele.querySelector('.play-pause-btn__icon').setAttribute('d', 'M18 12L0 24V0')//播放按钮
        } else {
            ele.querySelector('.play-pause-btn__icon').setAttribute('d', 'M0 0h6v24H0zM12 0h6v24h-6z')//暂停按钮
        }
    }
    that.eleAudio.addEventListener('loadedmetadata', () => {
        ele.querySelector('.sum-time').innerHTML = secondsToTime(that.eleAudio.duration);
    });

    that.eleAudio.addEventListener('play', () => {
      console.log('======播放中');
      that.showPlayIcon(false)
    });
    that.eleAudio.addEventListener('pause', () => {
      console.log('======暂停了');
      that.showPlayIcon(true)
    });

    that.elePlayIcon.addEventListener('click', () => {
        that.eleBaoGuo.addEventListener(eStart, that.handleStart, false);
        if (that.eleAudio.paused) {
            that.eleAudio.play()
            that.showPlayIcon(false)
        } else {
            that.eleAudio.pause()
            that.showPlayIcon(true)
        }
    });

    that.eleAudio.addEventListener('timeupdate', () => {
        var current = that.eleAudio.currentTime;
        var percent = current / that.eleAudio.duration;
        that.eleRangePointer.style.width = percent * that.eleBaoGuo.offsetWidth + 'px'
        that.eleRangePointer.querySelector('.range-pointer-round').style.left = percent * that.eleBaoGuo.offsetWidth + 'px'
        ele.querySelector('.pass-time').innerHTML = secondsToTime(current);
    });

    that.eleAudio.addEventListener('ended', () => {
        that.eleAudio.currentTime = 0
        ele.querySelector('.pass-time').innerHTML = secondsToTime(0);
        that.showPlayIcon(true)
    });


    that.handleStart = function (e) {
        var ev = isTouch ? e.touches[0] : e;
        that.alreadyMove = false
        that.eleAudio.pause()
        that.startX = ev.clientX - that.offsetX
        that.eleRangePointer.style.width = that.startX + 'px'
        that.eleRangePointer.querySelector('.range-pointer-round').style.left = that.startX + 'px'
        document.addEventListener(eMove, that.handleMove, false);
        document.addEventListener(eEnd, that.handleEnd, false);
        document.addEventListener(eCancel, that.handleEnd, false);
    }
    that.handleMove = function (e) {
        var ev = isTouch ? e.touches[0] : e;
        that.alreadyMove = true
        var deltaX = ev.clientX - that.offsetX - that.startX
        that.sumX = that.startX + deltaX
        //console.log('======sumX',sumX);

        if (that.sumX > that.eleBaoGuo.offsetWidth) {
            that.sumX = that.eleBaoGuo.offsetWidth
        }
        if (that.sumX < 3) {
            that.sumX = 0
        }
        that.eleRangePointer.style.width = that.sumX + 'px'
        that.eleRangePointer.querySelector('.range-pointer-round').style.left = that.sumX + 'px'
        ele.querySelector('.pass-time').innerHTML = secondsToTime(that.sumX / that.eleBaoGuo.offsetWidth * that.eleAudio.duration)

    }
    that.handleEnd = function (e) {
        that.eleAudio.play()


        if (!that.eleAudio.paused) {
            that.showPlayIcon(false)
        }

        console.log("======开始注销");
        if (that.alreadyMove) {
            that.eleAudio.currentTime = that.sumX / that.eleBaoGuo.offsetWidth * that.eleAudio.duration
        } else {
            that.eleAudio.currentTime = that.startX / that.eleBaoGuo.offsetWidth * that.eleAudio.duration
        }

        document.removeEventListener(eMove, that.handleMove);
        document.removeEventListener(eEnd, that.handleEnd);
        document.removeEventListener(eCancel, that.handleEnd);
    }



    function offsetXY(element) {
        var pos = { left: 0, top: 0 };
        var parents = element.offsetParent;
        console.log('======parents', parents);
        pos.left += element.offsetLeft;
        pos.top += element.offsetTop;

        while (parents && !/html|body/i.test(parents.tagName)) {
            pos.left += parents.offsetLeft;
            pos.top += parents.offsetTop;
            parents = parents.offsetParent;
        }
        return pos;
    }
    function secondsToTime(seconds) {
        const min = Math.floor(seconds / 60);
        const sec = Math.floor(seconds % 60);
        return `${(min < 10) ? `0${min}` : min}:${(sec < 10) ? `0${sec}` : sec}`;
    }
    function renderDOM() {
        var str = `<div class="yt audio-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewbox="0 0 18 24">
      <path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-btn__icon"></path>
  </svg>
  <div class="yt-self-center pass-time"></div>
    <div class="yt yt-f1 baoguo">
      <div class="underlay">
        <div class="range-pointer">
          <div class="range-pointer-round"></div>
          </div>
        </div>

    </div>
    <div class="sum-time"></div>
   </div>`
        return str
    }
}